import React, { Component } from "react";
import { Card, List } from "antd";
import { ArrowLeftOutlined } from "@ant-design/icons";
import LinkButton from "@/components/link-button";
import { BASE_IMG_URL } from "@/utils/constant";
import { reqCategory } from "@/api";
import memoryUtils from "@/utils/memoryUtils"

const Item = List.Item;

//product的商品详情子路由
export default class Detail extends Component {
  constructor(props) {
    super(props)
    this.state = {
      cName1: "",  //一级分类名称
      cName2: "",  //二级分类名称
    }
  }
  async componentDidMount() {
    //得到当前商品的分类的id
    const { pCategoryId, categoryId } = memoryUtils.product
    if (pCategoryId === '0') {  //一级分类的商品
      let result = await reqCategory(categoryId);
      const cName1 = result.data.data.name;
      this.setState({ cName1 })
    } else {
      //二级分类的商品
      //通过多个await方式发生多个请求：后面一个请求是在前一个请求成功返回之后才发送
      /* let result1=await reqCategory(pCategoryId);  //获取一级列表
       let result2=await reqCategory(categoryId);   //获取二级列表
       const cName1=result1.data.data.name; 
       const cName2=result2.data.data.name;
       this.setState({cName1,cName2})
       */

      //一次性发生多个网络请求，只有都成功了才正常处理
      const results = await Promise.all([reqCategory(pCategoryId), reqCategory(categoryId)])
      const cName1 = results[0].data.data.name;
      const cName2 = results[1].data.data.name;
      this.setState({ cName1, cName2 })
    }

  }

  //在卸载清除之前保存的数据
  componentWillUnmount() {
    memoryUtils.product = {}
  }

  render() {
    //读取携带过来state的数据
    const { name, desc, price, detail, imgs } = memoryUtils.product
    const { cName1, cName2 } = this.state;
    const title = (
      <span>
        <LinkButton>
          <ArrowLeftOutlined
            style={{ color: "green", marginRight: 15, fontSize: 20 }}
            onClick={() => this.props.history.goBack()} />
          <span>商品详情</span></LinkButton>
      </span>
    );

    return (
      <Card title={title} className="product-detail">
        <List>
          <Item>
            <span className="left">商品名称：</span>
            <span>{name}</span>
          </Item>
          <Item>
            <span className="left">商品描述：</span>
            <span>{desc}</span>
          </Item>
          <Item>
            <span className="left">商品价格：</span>
            <span>{price}元</span>
          </Item>
          <Item>
            <span className="left">所属分类：</span>
            <span>{cName1}{cName2 ? '-->' + cName2 : ''}</span>
          </Item>
          <Item>
            <span className="left">商品图片：</span>
            <span>
              {
                imgs.map(img => (
                  <img
                    key={img}
                    src={BASE_IMG_URL + img}
                    className="product-img"
                    alt="img"
                  />
                ))
              }
            </span>
          </Item>
          <Item>
            <span className="left">商品详情：</span>
            <span
              //react里面动态渲染html的内容的属性
              dangerouslySetInnerHTML={{
                __html: detail,
              }}
            ></span>
          </Item>
        </List>
      </Card>
    );
  }
}
